<template>
     <div class="user-edit-container">
       <!-- Header 区域 -->
       <van-nav-bar title="编辑资料" left-arrow @click-left="$router.back()" fixed />
   
       <!-- 用户资料 -->
       <van-cell-group class="action-card">
         <van-cell title="头像" is-link center @click="avatarClickFn">
           <template #default>
             <van-image round class="avatar" :src="profileObj.photo"/>
             <input 
                  type="file"
                  ref="iptFile"
                  v-show="false"
                  accept="image/*"
                  @change="onFileChange" 
                  />
           </template>
         </van-cell>
         <van-cell title="名称" is-link  :value="profileObj.name" @click="updateUserNameFn"/>
         <van-cell title="生日" is-link  :value="profileObj.birthday" @click="dataPickerFn"/>
       </van-cell-group>
       
       <!-- 修改用户昵称的对话框 -->
       <van-dialog v-model="show" title="标题" show-cancel-button :before-close="beforeCloseFn">
          <input type="text" v-model="cloneUserNameShow" v-focus>
       </van-dialog>
       
       <van-popup v-model="datePickerShow" get-container="body" position="bottom"
         round >
       <!-- 时间选择器 -->
       <van-datetime-picker
         v-model="currentDate"
         type="date"
         title="选择年月日"
         :min-date="minDate"
         :max-date="maxDate"
         @cancel="datePickercancelFn"
         @confirm="datePickerconfirm"
          />
       </van-popup>
     </div>
   </template>
   
   <script>
     import {profileApi,updateUserAvatar,updateUserNameApi} from '../../api/index.js'
     import {dateFormmatter} from '../../utils/dayformate.js'
     import {getToken} from '../../utils/token.js'
   export default {
     name: 'UserEdit',
     data(){
       return{
         profileObj:{}, // 用户的个人信息
         show:false, // 控制修改用户昵称的对话框
         cloneUserNameShow:'', //复制用户名字作为回填展示使用
         minDate: new Date(1920, 0, 1), // 最小的可选时间
         maxDate: new Date(), // 最大的可选时间
         currentDate: new Date(), // 当前用户已选择的时间(或默认展示的时间)
         datePickerShow:false, // 时间选择器变量控制
       }
     },
     created(){
       this.getProfile()
     },
     methods:{
      async getProfile(){
         let {data:res} = await profileApi()
         console.log(res)
         this.profileObj = res.data
       },
       // 修改用户头像(图片点击事件)
       async onFileChange(e){
         if(e.target.files.length === 0) return
         const fd = new FormData()
         fd.append('photo',e.target.files[0])
         let res = await updateUserAvatar(fd)
         this.profileObj.photo = res.data.data.photo
         // 把最新的头像缓存到vuex里面,因为user页面被缓存了不能拿到最新的图片
         this.$store.dispatch('setphoto',res.data.data.photo)
         console.log(res)
       },
       // 移花接木
       avatarClickFn(){
         this.$refs.iptFile.click() // 模拟用户点击了input
       },
       // 修改用户名称
       updateUserNameFn(){
          this.show = true
          this.cloneUserNameShow = this.profileObj.name
       },
      // 用户点击修改名称弹窗关闭前的事件
      async beforeCloseFn(action,done){
        // 用户点击了确定
        if(action === 'confirm'){
          let reg = /^[A-z0-9\u4e00-\u9fa5]{1,7}$/
          // test是归属于正则的方法,得到的结果是一个布尔值
            if(reg.test(this.cloneUserNameShow)){
                try{
                  let res = await updateUserNameApi({
                    name:this.cloneUserNameShow,
                  })
                  // 请求发送成功后直接把个人资料对象内的值替换为输入框的值,因为我们没有重新获取服务器新的数据只能先这样
                    this.profileObj.name = this.cloneUserNameShow
                    this.$store.commit('setUserName',this.cloneUserNameShow)
                    done()
                }catch(e){
                  console.log(e)
                   done()
                }
            }else{
              // 校验不通过
              done(false)
              this.$notify({type:'warning',message:'格式为1~7位的英文数字中文'})
            }
        }else{
          // 用户点击了取消
          done()
        }
      },
      // 时间选择器 - 点击事件
      dataPickerFn(){
        this.datePickerShow = true // 让时间选择器显示
        // 要的格式是时间日期对象
        this.currentDate = new Date(this.profileObj.birthday) // 服务器返回的是字符串格式的时间,
      },
      // 时间选择器 - 取消事件
      datePickercancelFn(){
        this.datePickerShow = false
      },
      // 时间选择器 - 确认事件
      async datePickerconfirm(){
        // 后台需要的是字符串格式时间
        let res = await updateUserNameApi({
          // 借助dayjs格式化时间
          birthday:dateFormmatter(this.currentDate)
        })
        this.profileObj.birthday = dateFormmatter(this.currentDate)
        this.datePickerShow = false
      }
     }
   }
   </script>
   
   <style lang="less" scoped>
     /deep/.van-dialog__content{
       text-align: center;
       input{
         outline: none;
         border: none;
         text-align: center;
       }
     }
   .user-edit-container {
     padding-top: 46px;
     .avatar {
       width: 50px;
       height: 50px;
     }
   }
   </style>
